<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-11 14:04:06
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-18 10:15:57
 * @FilePath: \mobile\src\pages\HomePage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="continar">
        <header>
            <van-nav-bar class="top">
                <template #left>
                    <van-button type="primary" block to="/city" class="city">城市</van-button>
                </template>
                <template #title>
                    <van-button type="primary" block class="inp" to="/search">卡姿兰大眼睛</van-button>
                </template>
                <template #right>
                    <van-button type="primary" block to="/login" class="login"
                        v-if="username ? false : true">登录</van-button>
                    <div v-else @click="loginOut">退出登陆</div>
                </template>
            </van-nav-bar>
        </header>
        <main>
            <Swiper></Swiper>
            <Grid></Grid>
            <!-- <Seckill></Seckill> -->
            <List></List>
        </main>
        <footer>
            <van-row>
                <van-col span="4" class="home">
                    <van-icon name="wap-home-o" />
                    <div>home</div>
                </van-col>
                <van-col span="4" @click="jump('car')">
                    <van-icon name="shopping-cart-o" />
                    <div>car</div>
                </van-col>
                <van-col span="4" @click="jump('login')">
                    <van-icon name="contact" />
                    <div>login</div>
                </van-col>
            </van-row>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, toRefs } from 'vue'
import { router } from '../router';
import { checkImg, getData } from '../services'

import Swiper from '../components/Swiper.vue'
import Grid from '../components/Grid.vue'
import Seckill from '../components/Seckill.vue';
import List from '../components/List.vue';

//获取用户信息
const username = localStorage.getItem('username')

//跳转 
const jump = (path: string) => {
    router.push(`/${path}`)

}
//退出登录
const loginOut = () => {
    localStorage.removeItem('username')
    localStorage.removeItem('password')
    //跳转登录页
    jump('login')
}





</script>

<style lang="scss" scoped>
.continar {
    height: 667px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: gray;

    header {
        height: 8%;

        .top {
            font-size: 14px;
            color: white;
            padding: 5px;
            background-color: red;
            text-align: center;

            .city {
                background-color: red;
                border: 0;
            }

            .inp {
                width: 200px;
                border-radius: 20px;
                height: 30px;
                padding: 5px 10px;
                background-color: white;
                border: 0;
                color: gray;
            }

            .login {
                background-color: red;
                border: 0;
            }
        }
    }

    main {
        flex: 1;

    }

    footer {
        width: 100%;
        height: 8%;
        background-color: #fff;
        font-size: 18px;
        font-weight: lighter;
        position: fixed;
        bottom: 0;

        .van-row {
            justify-content: space-around;
            text-align: center;
            margin-top: 12px;

            .home {
                color: skyblue;
            }
        }
    }
}
</style>